<template>
  <div id="wrap">
    <!-- 顶部 -->
    <header>
      <van-nav-bar title="专家义诊" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon
            :name="require('../../assets/HealthMall_img/icon转发@2x.png')"
            size="18"
          />
        </template>
      </van-nav-bar>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
      <img src="../../assets/img/banner@2x.png" alt="" />
    </div>
    <!-- doceor -->
    <main>
      <div class="context">
        <p>您本周还有<span>2次</span>义诊机会</p>
        <div class="btn">
          <span class="span span_one">本地医生</span>
          <span class="span span_two">全国医生</span>
        </div>
      </div>
    </main>
    <!-- 科室 -->
    <div class="item_list">
      <ul>
        <li
          v-for="(value, index) in department"
          :key="index"
          @click="chooseks(value)"
        >
          {{ value.ksname }}
        </li>
      </ul>
    </div>
    <!-- 医生列表 -->
    <div class="doctoeli">
      <ul>
        <li v-for="(item, index) in doctorli" :key="index">
          <img :src="item.imgUrl" alt="" />
          <div class="info">
            <p class="name">
              {{ item.name }}&nbsp;<span
                >{{ item.Position }}·{{ item.Departments }}</span
              >
            </p>
            <span class="span hospital">{{ item.hospital }}</span>
            <span class="span context">{{ item.adept }}</span>
            <div class="reply">
              <p>
                回复&nbsp;<span>{{ item.Praise }}</span>
              </p>
              <p>
                咨询&nbsp;<span>{{ item.consult }}人</span>
              </p>
              <p>
                好评&nbsp;<span>{{ item.textPrice }}</span>
              </p>
            </div>
            <div class="buy">
              <p class="price">￥1</p>
              <span class="question">立即咨询</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted } from "vue";

export default {
  setup() {
    //  变量
    const store = useStore();
    const router = useRouter();
    const department = computed(() => store.state.departmentModul.department);
    const doctorli = computed(() => store.state.departmentModul.doctorli);

    const departmentsApi = () => store.dispatch("departmentsApi");

    //  方法
    const onClickLeft = () => {
      router.go(-1);
    };
    const chooseks = (value) => {
      store.dispatch("getdoctor", { id: value.ksid });
      console.log(value.ksid);
    };
    onMounted(() => {
      departmentsApi();
      store.dispatch("getdoctor", { id: "01" });
    });
    return {
      //  变量
      router,
      store,
      department,
      doctorli,

      //  方法
      onClickLeft,
      chooseks,
    };
  },
};
</script>
<style lang="less">
@import "../../assets/css/diagnosis.less";
</style>
